"use client";
import { useTranslations } from "next-intl";
import { Table, theme } from "antd";
import { useRouter } from "next/navigation";
import AvaForm from "./AvaForm";
// import { columns, data } from "./column";
import Layout from "@/components/Layout";
import styles from "./index.module.less";
import React, { useState } from "react";
import { Button, Modal } from "antd";
import Myfrom from "./myfrom";
import { Space, Tag, type TableProps } from "antd";

export default function User() {
  const t = useTranslations("lsy");
  const { token } = theme.useToken();

  const listStyle: React.CSSProperties = {
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 12,
  };
  //表格

  interface DataType {
    key: string;
    name: string;
    role: number;
    desc: string;
    tags: string[];
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
      fixed: "left",
      width: 100,
    },
    {
      title: "角色",
      dataIndex: "role",
      key: "role",
      render: (role) => (role === 1 ? "超级管理员" : "开发者"),
    },
    {
      title: "简介",
      dataIndex: "desc",
      key: "desc",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              showModal();
              settitle("编辑");
              setitemobj(record);
            }}
          >
            {" "}
            编辑
          </a>
          <a
            onClick={() => {
              setDate(
                data.filter((item) => {
                  return record.key !== item.key;
                })
              );
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];

  const [data, setDate] = useState([
    {
      key: "1",
      name: "徐小夕",
      role: 1,
      desc: "H5-Dooring作者, 掘金签约作者，知乎专栏作家",
      tags: ["前端工程师", "developer"],
    },
    {
      key: "2",
      name: "张三",
      role: 2,
      desc: "知乎专栏作家",
      tags: ["前端工程师", "developer", "Dooring"],
    },
    {
      key: "3",
      name: "李盟",
      role: 2,
      desc: "Dooring共建者",
      tags: ["后端工程师", "V6.Dooring", "Dooring"],
    },
    {
      key: "4",
      name: "王阿明",
      role: 2,
      desc: "技术合伙人",
      tags: ["全栈工程师", "橙子表单"],
    },
    {
      key: "5",
      name: "张小明",
      role: 2,
      desc: "技术合伙人",
      tags: ["全栈工程师", "橙子表单"],
    },
    {
      key: "6",
      name: "Tom",
      role: 2,
      desc: "技术合伙人",
      tags: ["全栈工程师", "Next-Admin"],
    },
    {
      key: "7",
      name: "Json",
      role: 2,
      desc: "技术合伙人",
      tags: ["全栈工程师", "Next-Admin"],
    },
  ]);

  // export { columns, data };

  //弹框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, settitle] = useState("");
  const [itemobj, setitemobj] = useState({});
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = (obj, txt) => {
    if (txt == "添加") {
      data.push(obj);
    } else {
      let index = data.findIndex((item) => {
        return obj.key == item.key;
      });
      data[index] = obj;
    }
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Layout curActive="/lsy">
      <main className={styles.userWrap}>
        <div className={styles.content}>
          <AvaForm />
          <div style={listStyle}>
            <h3>{"lsy"}</h3>
            <>
              <Button
                type="primary"
                onClick={() => {
                  showModal();
                  settitle("添加");
                  setitemobj({});
                }}
              >
                添加
              </Button>
              <Modal
                footer={null}
                title="Basic Modal"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
              >
                <Myfrom
                  key={new Date().getTime()}
                  title={title}
                  itemobj={itemobj}
                  handleOk={handleOk}
                ></Myfrom>
              </Modal>
            </>
            <Table
              columns={columns}
              dataSource={data}
              pagination={{ pageSize: 5 }}
              scroll={{ x: 1000 }}
            />
          </div>
        </div>
      </main>
    </Layout>
  );
}
